<template>
  <popup-tree-input
    :data="data"
    :props="popupTreeProps"
    :value="inputValue"
    :node-key="2"
    :current-change="currentChange"
  />
</template>

<script>
import { useRequest } from "vue-request";
import { listClassify } from "@/api/flowClassifyApi";
import PopupTreeInput from "@/components/PopupTreeInput";
import { get } from "lodash";
import { ref, watch } from "vue";

const formatResult = (data) => {
  return get(data, "data", []);
};

const popupTreeProps = {
  label: "name",
  children: "children",
};

export default {
  components: {
    PopupTreeInput,
  },
  emits: ["update:modelValue"],
  setup(props, { emit }) {
    const { data, loading } = useRequest(listClassify, {
      formatResult,
    });
    const inputValue = ref(null);

    const currentChange = (data) => {
      inputValue.value = get(data, "name");
    };

    watch(inputValue, () => {
      emit("update:modelValue", get(data, "value.[0].id"));
    });

    return {
      data,
      loading,
      inputValue,
      currentChange,
      popupTreeProps,
    };
  },
};
</script>

<style>
</style>
